<template>
    <div class="main">
        <div v-html="table"></div>
    </div>
</template>
<script  setup lang="ts">
import { nextTick, reactive, ref, watch } from 'vue'
let arr = reactive(
    [
        {
            "id": 1,
            "nickName": "js大牛",
            "header": "https://img0.baidu.com/it/u=1348709467,3751255405&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
            "comment": "听说今天要使用递归实现评论列表",
            "children": [
                {
                    "id": 2,
                    "nickName": "在学算法的小胖",
                    "header": "http://img.duoziwang.com/2017/07/26183817321274.jpg",
                    "comment": "哇，太好了，可以很好的提升我的算法了，大家有什么好的方法去实现了？",
                    "children": [
                        {
                            "id": 3,
                            "nickName": "面壁者-肖叮",
                            "header": "http://img.duoziwang.com/2017/07/26183817321147.jpg",
                            "comment": "我也想知道，感觉这个好难哦",
                            "children": []
                        },
                        {
                            "id": 4,
                            "nickName": "从0到1",
                            "header": "http://img.duoziwang.com/2016/10/27/15110914705.jpg",
                            "comment": "我现在也没用思路，只能边写边想了。"
                        }
                    ]
                }
            ]
        },
        {
            "id": 5,
            "nickName": "js大牛",
            "header": "http://img.duoziwang.com/2016/10/27/15120614923.jpg",
            "comment": "这个功能需求是一个学长公司的，学长现在发展不错哦，月薪30K",
            "children": [
                {
                    "id": 6, "nickName": "在学算法的小胖",
                    "header": "http://img.duoziwang.com/2016/10/27/15120514920.jpg",
                    "comment": "膜拜大佬，向大佬学习",
                    "children": []
                },
                {
                    "id": 7,
                    "nickName": "面壁者-肖叮",
                    "header": "http://img.duoziwang.com/2016/12/23/01594969440.jpg",
                    "comment": "膜拜大佬，你是我的偶像，我也要努力拿高薪",
                    "children": []
                },
                {
                    "id": 8,
                    "nickName": "从0到1",
                    "header": "http://img.duoziwang.com/2016/10/27/15120514920.jpg",
                    "comment": "太棒了，努力，努力！",
                    "children": [
                        {
                            "id": 9,
                            "nickName": "YuePeng+",
                            "header": "http://img.duoziwang.com/2017/07/26183817321274.jpg",
                            "comment": "我觉得我应该能够很快做出来，大家觉得我有这个实力么？",
                            "children": [
                                {
                                    "id": 12,
                                    "nickName": "YuePeng+",
                                    "header": "http://img.duoziwang.com/2016/10/27/15120514920.jpg",
                                    "comment": "吹牛逼吧！",
                                    "children": [
                                        {
                                            "id": 13,
                                            "nickName": "Evan-Nightly",
                                            "header": "http://img.duoziwang.com/2016/10/27/15110914705.jpg",
                                            "comment": "等着瞧！就做出来给你看",
                                            "children": []
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "id": 8,
                            "nickName": "从0到1",
                            "header": "http://img.duoziwang.com/2017/09/1611314386085.jpg",
                            "comment": "大家有什么好方法了，发出来参考一下",
                            "children": [
                                {
                                    "id": 9,
                                    "nickName": "YuePeng+",
                                    "header": "http://img.duoziwang.com/2016/10/27/15120614923.jpg",
                                    "comment": "我只知道递归就是函数调用函数，但结构渲染是个难题",
                                    "children": []
                                },
                                {
                                    "id": 8,
                                    "nickName": "从0到1",
                                    "header": "http://img.duoziwang.com/2016/12/17/10384445124.jpg",
                                    "comment": "我现在一点思路都没有，救救我啊",
                                    "children": [
                                        {
                                            "id": 10,
                                            "nickName": "YuePeng+",
                                            "header": "http://img.duoziwang.com/2017/07/26183817321147.jpg",
                                            "comment": "我也是，怎么办了？",
                                            "children": []
                                        },
                                        {
                                            "id": 11,
                                            "nickName": "hvang1988",
                                            "header": "http://img.duoziwang.com/2016/10/27/15120514921.jpg",
                                            "comment": "终于做出来了，好开心啊！其实也不难，就是思路的问题。",
                                            "children": []
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
)

let comment = (arr:any) => {
    let div = "<ul>"
    arr.forEach((item:any) => {
        div += `<li style="list-style:none;"> 
                    <image src=${item.header} class='picture'/><span class="comment">${item.nickName}<span>
                    <ul><li style="list-style:none;">${item.comment}</li></ul>
                    ${item.children ? comment(item.children) : ""}
                </li>`
             })
        div += "</ul>" 
    return div
}
let table = comment(arr)

</script>
<style scoped lang="less">
   /deep/ .picture{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 10px;
    }
   /deep/ .comment{
        line-height: 40px;
        color: #9E9E9E;
    }
</style>